

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
	<meta charset="utf-8">
    <base href="<%=basePath%>">
    
    <title>3D旋转</title>
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<style>
		*{
		margin:0;
		padding:0;
		}
		div{
			width:940px;
			height:300px;
			
			margin-top:100px;
			margin-left:210px;
		}
		
		div ul{
			display:flex;
			justify-content:space-between;
			list-style:none;
			width:940px;
			height:300px;
			
			<!--background-color:#66ccff;-->
		}
		img{
			width:300px;
			height:300px;
			transform:rotateY(0deg);
		}
		
		div ul li{
			position:relative;
		
			width:300px;
			height:300px;
			
			perspective:1000px;
		}
		p{
			position:absolute;
			left:0;
			top:0;
			width:300px;
			height:210px;
			padding-top:90;
			background-color:rgba(0,0,0,0.6);
			text-align:center;
			transform:rotateY(90deg);
			transition:.5s;
		}
		div ul li:hover p{
			transform:rotateY(0deg);
			
		}
		
		div ul li:hover img{
			transform:rotateY(-90deg);
			transition:.5s;
			
		}
	</style>
	
  </head>
  
  <body>
    <div> 
		<ul>
			<li>
				<img src="img/1.jpg"/>
				<p>我爱你我爱你我爱你我爱你我爱你我爱你我爱你我爱你</p>	</li>
			<li><img src="img/2.jpg"/>
			<p>我爱你我爱你我爱你我爱你我爱你我爱你我爱你我爱你</p></li>
			<li><img src="img/3.jpg"/><p>我爱你我爱你我爱你我爱你我爱你我爱你我爱你我爱你</p></li>
			
		</ul>
	</div>
  </body>
</html>
